<!--页面主要内容-->
<style>
    /*使图片在浏览器中居中显示*/
    .bigImg {
         position: absolute;
         top: 50%;
         left: 50%;
         /*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/
         transform: translate(-50%,-50%);
     }
     /*遮罩层*/
     .opacityBottom {
         width: 100%;
         height: 100%;
         position: fixed;
         background: rgba(0,0,0,0.8);
         z-index: 9999;
         top: 0;
         left: 0;
     }
</style>
<main class="lyear-layout-content">

    <div class="container-fluid p-t-15">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">

                        <form method="post" class="row" enctype="multipart/form-data">
                            <div class="form-group col-md-12">
                                <label for="name">商品名称</label>
                                <input type="text" class="form-control" id="name" name="name" value="{$productList.name}"
                                    placeholder="请输入商品名称" />
                            </div>
                            <div class="form-group col-md-12">
                                <label for="typeid">商品分类</label>
                                
                                <select class="form-control" id="typeid" name="typeid">
                                  {foreach $productTypeList as $item}
                                  {if $productList.typeid == $item.id}
                                    <option value="{$item.id}" selected>{$item['name']}</option>
                                    {else}
                                    <option value="{$item.id}" >{$item['name']}</option>
                                  {/if}
                                  {/foreach}
                                </select>
                                
                              </div>
                            <div class="form-group col-md-12">
                                <label for="price">商品价格</label>
                                <input type="number" class="form-control" id="price" name="price" value="{$productList.price}"
                                    placeholder="请输入商品价格" />
                            </div>
                            <div class="form-group col-md-12">
                                <label for="stock">商品库存</label>
                                <input type="number" class="form-control" id="stock" name="stock" value="{$productList.stock}"
                                    placeholder="请输入商品库存" />
                            </div>
                            <div class="form-group col-md-12">
                                <label for="seo_description">描述内容</label>
                                <textarea class="form-control" id="seo_description" name="content" rows="5" value=""
                                  placeholder="描述内容">{$productList.content}</textarea>
                            </div>
                            <div class="form-group col-md-12">
                                <label>原来图片预览</label>
                                <div class="form-controls">
                                  <ul class="list-inline row lyear-uploads-pic mb-0">
                                    {foreach  $productList['thumbs_cdn'] as $item => $val}
                                    <li class="col-6 col-md-4 col-lg-2" id="imgLiCDN{$item}">
                                        <figure>
                                          <img src="{$val}" alt="图片一" id="imgCDN{$item}">
                                          <figcaption>
                                            <a class="btn btn-round btn-square btn-primary" onclick="BigImg('#imgCDN{$item}')"><i
                                                class="mdi mdi-eye"></i></a>
                                          </figcaption>
                                        </figure>
                                    </li>
                                    {/foreach}
                                  </ul>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label>更新图片</label>
                                <input type="file" class="form-control" name="thumbs[]" id="thumbs" multiple  size="30" 
                                        hidden>
                                <div class="form-controls">
                                  <ul class="list-inline row lyear-uploads-pic mb-0">
                                    <li class="col-6 col-md-4 col-lg-2" id="pic-add">
                                      <a class="pic-add" id="add-pic-btn"  onclick="thumbs.click()" title="点击上传"></a>
                                    </li>
                                  </ul>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="flag">标签</label>
                                <div class="clearfix">
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="flagOne" name="flag" value="1"
                                            class="custom-control-input" checked>
                                        <label class="custom-control-label" for="flagOne">新品</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="flagTwo" name="flag" value="2"
                                            class="custom-control-input" >
                                        <label class="custom-control-label" for="flagTwo">热销</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="flagThree" name="flag" value="3"
                                            class="custom-control-input">
                                        <label class="custom-control-label" for="flagThree">推荐</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确
                                    定</button>
                                <button type="button" class="btn btn-default"
                                    onclick="javascript:history.back(-1);return false;">返 回</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

    </div>

</main>
<!--End 页面主要内容-->
<script>
    
     // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }
    //单击图片变大预览
    function BigImg(elem){
        //获取图片路径
        var imgsrc = $(elem).attr("src");
        // console.log(imgsrc);
        var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" src="' + imgsrc + '"></div>';
        $(document.body).append(opacityBottom);
        toBigImg();//变大函数
    }

    //单击删除选中图片
    function DelImg(elem){
        $(elem).remove();
    }

    //图片变大预览方法
    function toBigImg() {
        $(".opacityBottom").addClass("opacityBottom");//添加遮罩层
        $(".opacityBottom").show();
        $("html,body").addClass("none-scroll");//下层不可滑动
        $(".bigImg").addClass("bigImg");//添加图片样式
        //点击关闭
        $(".opacityBottom").click(function () {
            $("html,body").removeClass("none-scroll");
            $(".opacityBottom").remove();
        });
    }

    $('#thumbs').change(function(){
        let length = $(this)[0].files.length
        for(let i = 0; i<length;i++){
            let file = $(this)[0].files[i]
            let m = Math.round(Math.random()*100);
            let imgUI = `
                <li class="col-6 col-md-4 col-lg-2" id="${'imgLi'+m}">
                    <figure>
                    <img src="${GetObjectURL(file)}" alt="图片一" id="${'img'+m}">
                    <figcaption>
                        <a class="btn btn-round btn-square btn-primary" onclick="BigImg('#${'img'+m}')"><i
                            class="mdi mdi-eye"></i></a>
                        <a class="btn btn-round btn-square btn-danger" onclick="DelImg('#${'imgLi'+m}')"><i
                            class="mdi mdi-delete"></i></a>
                    </figcaption>
                    </figure>
                </li>
            `
            $('#pic-add').before(imgUI)
        }
        // $('#thumbs').val(''); //处理完之后只需要加这个代码即可
    })

    layui.use(['layer'], function () {
        let $ = layui.jquery,
            layer = layui.layer
    })
    
</script>